<html>
<head>
	<title>ForeignObject on canvas</title>
	<script type="text/javascript">
		mxBasePath = '../../../javascript/src';
	</script>
	<script type="text/javascript" src="../../../javascript/src/js/mxClient.js"></script>
	<script type="text/javascript">
		function main()
		{
			var canvas = document.createElement('canvas');
			canvas.setAttribute('width', '523');
			canvas.setAttribute('height', '393');
			document.body.appendChild(canvas);

			var ctx = canvas.getContext('2d');

			var data = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="523px" height="393px" version="1.1"><defs><linearGradient x1="0%" y1="0%" x2="0%" y2="100%" id="mx-gradient-ffffff-1-e6e6e6-1-s-0"><stop offset="0%" style="stop-color:#FFFFFF"/><stop offset="100%" style="stop-color:#E6E6E6"/></linearGradient></defs><g transform="translate(0.5,0.5)"><rect x="1" y="1" width="520" height="390" fill="#f5f8ff" stroke="#b3b3b3" pointer-events="none"/><path d="M 33 1 L 1 1 L 1 391 L 33 391 Z" fill="#d4e1f5" stroke="#b3b3b3" stroke-miterlimit="10" pointer-events="none"/><g transform="translate(4,191)rotate(-90,14,5.5)"><switch><foreignObject pointer-events="all" width="28" height="17" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(128, 128, 128); line-height: 1.26; vertical-align: top; white-space: nowrap; font-weight: bold; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;">Pool</div></div></foreignObject><text x="14" y="15" fill="#808080" text-anchor="middle" font-size="12px" font-family="Helvetica" font-weight="bold">[Object]</text></switch></g><path d="M 63 1 L 33 1 L 33 135 L 63 135 Z" fill="#a9c4eb" stroke="#a9c4eb" stroke-miterlimit="10" pointer-events="none"/><path d="M 63 1 L 521 1 L 521 135 L 63 135" fill="none" stroke="#a9c4eb" stroke-miterlimit="10" pointer-events="none"/><g transform="translate(29,63)rotate(-90,19.5,5.5)"><switch><foreignObject pointer-events="all" width="39" height="17" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.26; vertical-align: top; white-space: nowrap; font-style: italic; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;">Lane 1</div></div></foreignObject><text x="20" y="15" fill="#FFFFFF" text-anchor="middle" font-size="12px" font-family="Helvetica" font-style="italic">[Object]</text></switch></g><rect x="103" y="38" width="107" height="60" rx="16.2" ry="16.2" fill="url(#mx-gradient-ffffff-1-e6e6e6-1-s-0)" stroke="#a6a6a6" pointer-events="none"/><g transform="translate(137,62)"><switch><foreignObject pointer-events="all" width="38" height="17" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.26; vertical-align: top; width: 38px; white-space: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;">Start</div></div></foreignObject><text x="19" y="15" fill="#000000" text-anchor="middle" font-size="12px" font-family="Helvetica">[Object]</text></switch></g><path d="M 326 46 C 326 35.33 386 35.33 386 46 L 386 90 C 386 100.67 326 100.67 326 90 Z" fill="url(#mx-gradient-ffffff-1-e6e6e6-1-s-0)" stroke="#a6a6a6" stroke-miterlimit="10" pointer-events="none"/><path d="M 326 46 C 326 54 386 54 386 46 M 326 50 C 326 58 386 58 386 50 M 326 54 C 326 62 386 62 386 54" fill="none" stroke="#a6a6a6" stroke-miterlimit="10" pointer-events="none"/><path d="M 211 68 Q 211 68 319.63 68" fill="none" stroke="#a6a6a6" stroke-miterlimit="10" pointer-events="none"/><path d="M 324.88 68 L 317.88 71.5 L 319.63 68 L 317.88 64.5 Z" fill="#a6a6a6" stroke="#a6a6a6" stroke-miterlimit="10" pointer-events="none"/><path d="M 433 220 Q 433 263 433 263 Q 433 263 433 299.63" fill="none" stroke="#a6a6a6" stroke-miterlimit="10" pointer-events="none"/><path d="M 433 304.88 L 429.5 297.88 L 433 299.63 L 436.5 297.88 Z" fill="#a6a6a6" stroke="#a6a6a6" stroke-miterlimit="10" pointer-events="none"/><path d="M 63 135 L 33 135 L 33 265 L 63 265 Z" fill="#a9c4eb" stroke="#a9c4eb" stroke-miterlimit="10" pointer-events="none"/><path d="M 63 135 L 521 135 L 521 265 L 63 265" fill="none" stroke="#a9c4eb" stroke-miterlimit="10" pointer-events="none"/><g transform="translate(29,195)rotate(-90,19.5,5.5)"><switch><foreignObject pointer-events="all" width="39" height="17" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.26; vertical-align: top; white-space: nowrap; font-style: italic; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;">Lane 2</div></div></foreignObject><text x="20" y="15" fill="#FFFFFF" text-anchor="middle" font-size="12px" font-family="Helvetica" font-style="italic">[Object]</text></switch></g><path d="M 230 178 L 312 178 L 312 222.2 Q 291.5 208.16 271 222.2 Q 250.5 236.24 230 222.2 L 230 185.8 Z" fill="url(#mx-gradient-ffffff-1-e6e6e6-1-s-0)" stroke="#a6a6a6" stroke-miterlimit="10" pointer-events="none"/><path d="M 393 219 L 408.8 179 L 472 179 L 456.2 219 Z" fill="url(#mx-gradient-ffffff-1-e6e6e6-1-s-0)" stroke="#a6a6a6" stroke-miterlimit="10" pointer-events="none"/><path d="M 312 199 L 322 199 Q 332 199 342 199 L 394.63 199" fill="none" stroke="#a6a6a6" stroke-miterlimit="10" pointer-events="none"/><path d="M 399.88 199 L 392.88 202.5 L 394.63 199 L 392.88 195.5 Z" fill="#a6a6a6" stroke="#a6a6a6" stroke-miterlimit="10" pointer-events="none"/><path d="M 63 265 L 33 265 L 33 391 L 63 391 Z" fill="#a9c4eb" stroke="#a9c4eb" stroke-miterlimit="10" pointer-events="none"/><path d="M 63 265 L 521 265 L 521 391 L 63 391" fill="none" stroke="#a9c4eb" stroke-miterlimit="10" pointer-events="none"/><g transform="translate(29,323)rotate(-90,19.5,5.5)"><switch><foreignObject pointer-events="all" width="39" height="17" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.26; vertical-align: top; white-space: nowrap; font-style: italic; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;">Lane 3</div></div></foreignObject><text x="20" y="15" fill="#FFFFFF" text-anchor="middle" font-size="12px" font-family="Helvetica" font-style="italic">[Object]</text></switch></g><ellipse cx="271" cy="336" rx="30" ry="30" fill="url(#mx-gradient-ffffff-1-e6e6e6-1-s-0)" stroke="#a6a6a6" pointer-events="none"/><ellipse cx="271" cy="336" rx="26" ry="26" fill="none" stroke="#a6a6a6" pointer-events="none"/><ellipse cx="433" cy="336" rx="30" ry="30" fill="url(#mx-gradient-ffffff-1-e6e6e6-1-s-0)" stroke="#a6a6a6" pointer-events="none"/><ellipse cx="433" cy="336" rx="26" ry="26" fill="none" stroke="#a6a6a6" pointer-events="none"/><path d="M 271 222 Q 271 222 271 299.63" fill="none" stroke="#a6a6a6" stroke-miterlimit="10" pointer-events="none"/><path d="M 271 304.88 L 267.5 297.88 L 271 299.63 L 274.5 297.88 Z" fill="#a6a6a6" stroke="#a6a6a6" stroke-miterlimit="10" pointer-events="none"/><path d="M 346 99 L 346 110 Q 346 120 336 120 L 280 120 Q 270 120 270 130 L 270 171.63" fill="none" stroke="#a6a6a6" stroke-miterlimit="10" pointer-events="none"/><path d="M 270 176.88 L 266.5 169.88 L 270 171.63 L 273.5 169.88 Z" fill="#a6a6a6" stroke="#a6a6a6" stroke-miterlimit="10" pointer-events="none"/><path d="M 367 99 L 367 111 Q 367 121 377 121 L 421 121 Q 431 121 431 131 L 431 172.63" fill="none" stroke="#a6a6a6" stroke-miterlimit="10" pointer-events="none"/><path d="M 431 177.88 L 427.5 170.88 L 431 172.63 L 434.5 170.88 Z" fill="#a6a6a6" stroke="#a6a6a6" stroke-miterlimit="10" pointer-events="none"/></g></svg>';

			var DOMURL = window.URL || window.webkitURL || window;

			var img = new Image();
			var svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
			var url = DOMURL.createObjectURL(svg);

			img.onload = function () {
			  ctx.drawImage(img, 0, 0);
			  DOMURL.revokeObjectURL(url);
			}

			img.src = url;
		};
	</script>
</head>
<body onload="main();">
</body>
</html>
